<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form class="myfrom">
          <el-form-item label="标签名称" class="item">
            <el-input placeholder="请输入内容" v-model="query.tagName" class="demo-input-size" />
          </el-form-item>
          <el-form-item label="状态" class="item">
            <el-select placeholder="请选择" v-model.number="query.state" class="demo-input-size">
              <el-option label="启用" :value="0"></el-option>
              <el-option label="禁用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <div>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </div>
          <div class="mybtn">
            <!-- 按钮区域 -->
            <el-button type="primary" size="mini" @click="openAdd"><i class="el-icon-plus" />新增目录</el-button>
          </div>
        </el-form>
        <div class="totality">
          <i class="el-icon-info"></i>
          <span>数据一共 {{ total }} 条</span>
        </div>
        <el-table :data="list">
          <el-table-column label="序号" type="index" />
          <el-table-column prop="subjectName" label="所属学科" />
          <el-table-column prop="tagName" label="标签名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="!scope.row.state">已启用</span>
              <span v-else-if="scope.row.state">已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!-- 这里是作用域插槽 -->
            <!-- v-slot:插槽名字 -->
            <!-- #插槽名字 -->
            <!-- {} 代表解构 -->
            <!-- 这里的row就是点击的那一行数据 -->
            <template #default="{ row }">
              <!-- 点击这个禁用按钮, 上边的那个插槽里的内容就会跟着变化-->
              <!-- 禁用按钮 => 已禁用  启用按钮 => 已启用 -->
              <el-button type="text" @click="changeState(row)">{{ row.state === 1 ? '启用' : '禁用' }}</el-button>
              <el-button type="text" :disabled="row.state === 1 ? false : true" @click="edit(row)">修改</el-button>
              <el-button type="text" :disabled="row.state === 1 ? false : true" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
    <!-- 添加的弹出层 -->
    <container @getListData="getListData" ref="tagsadd" :role-show="roleShow" :panel-show.sync="panelShow"></container>
    <!-- 编辑的弹出层 -->
    <el-dialog title="编辑目录" :visible="editpanelShow" width="400px" @close="cancel">
      <el-form ref="myform" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="form.subjectID" placeholder="请选择" style="width:280px">
            <el-option v-for="(item, index) in simple" :key="index" :label="item.subjectName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="form.tagName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import { list, remove, changeState, update } from '@/api/hmmm/tags.js'
import { list as subList } from '@/api/hmmm/subjects.js'

export default {
  name: 'tags',
  components: {
    container: () => import('../components/tags-add.vue')
  },
  data () {
    return {
      list: [],
      currentPage: 1,
      pageSizes: [5, 10, 15, 20],
      pageSize: 5,
      total: 0,
      query: {
        tagName: '',
        state: ''
      },
      roleShow: false,
      panelShow: false,
      editpanelShow: false,
      form: {},
      simple: [],
      rules: {
        subjectID: [{ required: true, message: '学科不能为空', trigger: 'change' }],
        tagName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    getCompanys()
    getQuestion()
    this.getListData()
  },
  methods: {
    // 渲染数据表单
    async getSubList () {
      const { data: res } = await subList()
      // console.log(res)
      this.simple = res.items
    },
    cancel () {
      // 关闭面板
      this.editpanelShow = false
      this.form = {
        subjectID: '',
        tagName: ''
      }
    },
    // 提交
    submitEdit () {
      // 全局验证
      this.$refs.myform.validate(async res => {
        if (res) {
          await update(this.form)
          // 关闭面板
          this.editpanelShow = false
          // 清空数据
          this.form = {}
          this.$message.success('修改成功')
          // 重新加载数据
          this.getListData()
        } else {
          console.log('验证不通过')
        }
      })
    },
    edit (row) {
      this.getSubList()
      // 打开面案
      this.editpanelShow = true
      this.form = { ...row }
    },
    // 改变按钮状态
    async changeState (row) {
      const id = row.id
      const state = row.state
      const res = await changeState({
        id,
        state: +!state
      })
      // id 为1 启用, id为0 禁用
      this.list.forEach(item => {
        // 发送完请求需要手动修改本地数据
        if (item.id === id) {
          item.state = +!item.state
        }
      })
    },
    // 删除
    del (id) {
      // 询问是否删除
      this.$confirm('是否删除当前权限点', '提示')
        .then(async () => {
          // 请求删除标签的接口
          await remove({
            id
          })
          // 提示删除成功
          this.$message.success('删除成功')
          // 更新数据
          this.getListData()
        })
        .catch(() => {})
    },
    // 清楚
    clear () {
      this.query = {
        tagName: '',
        state: ''
      }
    },
    // 点击搜索
    async search () {
      const { data: res } = await list(this.query)
      console.log(res)
      this.list = res.items
      this.total = res.counts
    },
    // 打开面板
    openAdd () {
      this.panelShow = true
      this.$refs.tagsadd.getSubList()
    },
    // 获取数据
    async getListData () {
      const { data: res } = await list({
        page: this.currentPage,
        pagesize: this.pageSize
      })
      // console.log(res)
      this.list = res.items
      this.total = res.counts
    },
    // 当前面改变时会触发
    handleSizeChange (size) {
      this.pageSize = size
      this.getListData()
    },
    // 当页融量发生改变时会触发
    handleCurrentChange (page) {
      this.currentPage = page
      this.getListData()
    }
  }
}
</script>

<style lang="scss" scoped>
.myfrom {
  display: flex;
  margin-bottom: 30px;
  .item {
    display: flex;
    margin: 0 20px;
  }
  .demo-input-size {
    width: 180px;
  }
  .mybtn {
    margin-left: 450px;
  }
}
.totality {
  background-color: #f4f4f5;
  height: 35px;
  line-height: 35px;
  padding-left: 15px;
  margin-bottom: 20px;
  i {
    color: #909399;
    margin-right: 10px;
  }
}
</style>
